/*
* @Author: gpj
* @Date: 2023-06-10 10:31:22
* @LastEditors: Yejing
* @LastEditTime: 2023-07-04 16:54:34
* @Description: 样式调整
*/
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="$t('anchorConsole.signTittle')" left-icon-color="#fff" navbar-bg-color="#1B1D29"
				title-color="#fff">
			</c-navigation-bar>

			<!-- 修改 -->
			<view class="container-box form-modify">
				<scroll-view :scroll-y='allPage>1' class="contractBox" @scroll="onScroll">
					<u-parse :html="content" class='contractUparse'></u-parse>
				</scroll-view>
				<view class="contractBoxPaging" v-if="allPage>1&&allPage!=Infinity">
					<view class="paging">
						{{ nowPage }}/{{ allPage }}
					</view>
				</view>
			</view>
				<view class="bootom" slot="footer">
					<view class="container-box" style="position: relative;z-index: 999;">
						<signCard @src='src' :height="'220rpx'"></signCard>
					</view>
					<view class="container-box">
						{{$t('anchorConsole.date')}}:{{getNowFormatDate()}}
					</view>
					<u-button class="footer" @click="signContract" type="primary">
						{{$t('storeManagement.Completed')}}
					</u-button>
				</view>
		</c-layout>
				<promptDialog ref="promptDialogs_cs" @commit='commit'></promptDialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				content: '',
				content1: '',
				shopId: '',
				nowPage: 1,
				allPage: 0,
				imgsrc: '',
				viewHeight: 0,
				style: {
					// 字符串的形式
					p: 'color: red;font-size:32rpx',
					span: 'font-size: 30rpx'
				},
				followUrlData: {}
			}
		},
		onLoad(val) {
			this.followUrlData = val

		},
		methods: {
			src(data) {
				console.log(1111, data);

				if (data) {
					this.imgsrc = data
					this.content = this.content.replace(
						'display:none',
						"");
					this.content = this.content.replace("signImg", data);
				} else {
					this.content = this.content1
					this.content = this.content.replace(/img src="signImg"/g,
						'img src="signImg" style="width:100px;height:75px;display:none"')
				}

			},
			onScroll(e) {
				console.log(e.detail)
				this.nowPage = Math.ceil(e.detail.scrollTop / this.viewHeight) + 1
			},
			// 签订合同
			signContract() {
				if (!this.imgsrc) {
					this.$u.toast(this.$t('system.signName'))
					return
				}
				let url = ''
				let obj = {}
				if (this.followUrlData.type == 'anthor') {
					url = 'app/anchor/conclude'
					obj.signature = this.imgsrc

				} else {
					url = 'app/shop/signContract'
					obj.shopId = this.shopId
					obj.shopContract = this.content
					obj.sign = this.imgsrc
				}
				this.$u.post(url, obj).then(res => {
					this.$refs.promptDialogs_cs.show({
						confirm: (close) => {
							close()
							if (this.followUrlData.type == 'anthor') {
								this.$u.route('/pages/anchorConsole/anchorConsole')
							} else {
								// this.$u.route('/pages/storyType/storeManagement')
								uni.navigateTo({
									url: "/pages/storyType/Certificate"
								})
							}
							this.$u.init.getUserInfo()
						},
						icon: 'success',
						btnColor: '#2934d0', //按钮颜色
						btnTextType: 'Get a certificate', // 按钮文字
						des: this.$t('anchorConsole.signDes'),
						btnText: this.$t('card.success'),

					})

				})
			},
			getNowFormatDate() {
				let date = new Date(),
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

				return `${strDate}/${month}/${year}`

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery()
					query.select('.contractBox').boundingClientRect()
					query.exec(res => {
						this.viewHeight = res[0].height
					})
					console.log(this.viewHeight)
				}
			})
			//获取主播合同
			if (this.followUrlData.type == 'anthor') {
				this.$u.get('/app/anchor/getContract').then(res => {
					this.content = res.data.contract
					this.content1 = res.data.contract
					this.content = this.content.replace(/img src="signImg"/g,
						'img src="signImg" style="width:100px;height:75px;display:none"')
					this.$nextTick(() => {
						uni.getSystemInfo({
							success: ru => {
								const query = uni.createSelectorQuery()
								query.select('.contractUparse').boundingClientRect()
								query.exec(i => {
									console.log(i[0].height, this.viewHeight)
									this.allPage = Math.ceil(
										i[0].height / this.viewHeight)
								})
								console.log(this.allPage)
							}
						})
					})
				})

			} else {
				//获取商铺合同
				this.$u.get('/app/shop').then(res => {
					this.shopId = res.data.id
					this.$u.get('/app/shop/shopContract/' + this.shopId).then(r => {
						this.content = r.data.shopContract
						this.content1 = r.data.shopContract
						this.content = this.content.replace(/img src="signImg"/g,
							'img src="signImg" style="width:100px;height:75px;display:none"')
						this.$nextTick(() => {
							uni.getSystemInfo({
								success: ru => {
									const query = uni.createSelectorQuery()
									query.select('.contractUparse')
										.boundingClientRect()
									query.exec(i => {
										console.log(i[0])
										this.allPage = Math.ceil(
											i[0].height / this.viewHeight)
									})
								}
							})
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modify-page {
		background: #1B1D29;
		color: #fff;

		.modify-page {

			.container-box {
				height: 80vh;
				overflow: auto;
				padding: 30rpx;

				.contractBox {
					height: 75%;
					background: #fff;
					overflow: auto;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;

				}

			}

			.contractBoxPaging {
				border-bottom-right-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				background: #fff;
				height: 80rpx;
				margin-bottom: 10rpx;
				position: relative;

				.paging {
					width: 80rpx;
					height: 21px;
					text-align: center;
					background: #E8E8E9;
					border-radius: 11px 11px 11px 11px;
					color: #000;
					position: absolute;
					right: 40rpx;
					top: 18rpx;
					font-size: 12px;
					line-height: 21px;
				}
			}

			.bootom {
				position: absolute;
				bottom: 60rpx;
				width: 90%;
				left: 50%;
				transform: translateX(-50%);

				.u-btn {
					padding: 30rpx;
				}
			}

			.p-b-6 {
				padding-bottom: 60rpx;
				width: 100%;
				margin-top: 48rpx;
				display: inline-block;
			}

			.uploaddiv {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30rpx;
				border-radius: 20rpx;
				opacity: 1;
				border: 1px solid #E8E6EA;
				height: 296rpx;
			}
		}

		/deep/ .sign-img {
			height: 220rpx;
		}
	}
</style>